<template>
    <div class="container-filled">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="电影名称" prop="movieName">
                <el-input v-model="ruleForm.movieName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="电影图片路径" prop="movieImg">
                <el-input v-model="ruleForm.movieImg" autocomplete="off" />
            </el-form-item>
			<el-form-item label="电影持续时间" prop="movieDuration">
                <el-input v-model="ruleForm.movieDuration" autocomplete="off" />
            </el-form-item>
            <!-- <el-form-item label="电影下载地址" prop="movieDownload">
                <el-input v-model="ruleForm.movieDownload" />
            </el-form-item> -->
            <el-form-item label="电影上映地区" prop="movieArea">
                <!-- <el-cascader placeholder="请选择地区" size="large" :options="options" v-model="ruleForm.movieArea"
                    @change="handleChange">
                </el-cascader> -->
				<el-input v-model="ruleForm.movieArea" />
            </el-form-item>
            <el-form-item label="电影类型" prop="movieCategory">
                <el-select v-model="ruleForm.movieCategory" multiple placeholder="请选择类型" style="width: 240px">
                    <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="电影简介" prop="movieContext">
                <el-input v-model="ruleForm.movieContext" :autosize="{ minRows: 2, maxRows: 10 }" type="textarea"
                    placeholder="请输入电影简介" />
            </el-form-item>
            <el-form-item label="是否主页推荐" prop="movieMainPage">
                <el-switch v-model="ruleForm.movieMainPage" class="mb-2"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="推荐"
                    inactive-text="不推荐" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">// @ts-nocheck
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
// 引入电影类型数组
import movieCategoryOptions from "../../utils/movieCategoryOptions"
// 引入地区数组
import { regionData, CodeToText } from 'element-china-area-data'
import api from '../../api/api'
export default {
    data() {
        return {
            categoryOptions: movieCategoryOptions
        }
    },
    setup() {
        // 设置规则
        const ruleFormRef = ref<FormInstance>()
        // 设置地区数据
        const options = regionData
        // 转码后的地区
        const encodeRegion = ref("")
        // 检查是否为空
        const notEmpty = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('该字段不能为空!'))
            } else {
                callback()
            }
        }
        // 设置响应的数据
        const ruleForm = reactive({
            movieName: '',
            movieImg: '',
            movieDownload: 'none',
            movieCategory: [],
            movieArea: '',
            movieContext: '',
            movieMainPage: false,
			movieDuration : 0
        })
        // 在解除焦点之后触发验证器
        const rules = reactive({
            movieName: [{ validator: notEmpty, trigger: 'blur' }],
            movieImg: [{ validator: notEmpty, trigger: 'blur' }],
            // movieDownload: [{ validator: notEmpty, trigger: 'blur' }],
            movieCategory: [{ validator: notEmpty, trigger: 'blur' }],
            movieArea: [{ validator: notEmpty, trigger: 'blur' }],
            movieContext: [{ validator: notEmpty, trigger: 'blur' }],
            movieMainPage: false
        })
        // 提交按钮
        const submitForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    api.post("/admin/movie", {
                        movieName: ruleForm.movieName,
                        movieImg: ruleForm.movieImg,
                        movieDownload: ruleForm.movieDownload,
                        movieCategory: ruleForm.movieCategory.toString(),
                        movieArea: ruleForm.movieArea,
                        movieContext: ruleForm.movieContext,
                        movieMainPage: ruleForm.movieMainPage,
						movieDuration: ruleForm.movieDuration
                    }).then((res) => {
                        if (res.status === 201) {
							resetForm(ruleFormRef.value)
                            ElMessage.success("添加成功!")
                        } else {
                            ElMessage.error("添加失败!")
                        }
                    })
                } else {
                    ElMessage.error("验证失败!")
                    return false
                }
            })
        }
        // 重置按钮
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.resetFields()
        }

        // 将省市区的代码转为文字
        const handleChange = () => {
            for (let i = 0; i < ruleForm.movieArea.length; i++) {
                encodeRegion.value += CodeToText[ruleForm.movieArea[i]]
            }
        }
        // 将方法与表单对象导出
        return {
            ruleForm: ruleForm,
            options: options,
            ruleFormRef: ruleFormRef,
            rules: rules,
            submitForm: submitForm,
            resetForm: resetForm,
            handleChange: handleChange
        }
    }
}
</script>

<style lang="sass" scoped>

</style>